<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>测试请求</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>
</head>
<body>
  <button id='btn1'>按钮1--发送GET请求--不携带参数</button> <br/><br/>
  <button id='btn2'>按钮2--发送GET请求--携带query参数</button> <br/><br/>
  <button id='btn3'>按钮3--发送GET请求--携带params参数</button> <br/><br/><br/><br/>

  <button id='btn4'>按钮4--发送POST请求--携带query参数</button> <br/><br/>
  <button id='btn5'>按钮5--发送POST请求--携带params参数</button> <br/><br/>
  <button id='btn6'>按钮6--发送POST请求--携带请求体参数</button> <br/><br/><br/><br/>

  <button id='btn7'>按钮7--发送POST请求--携带query\params\请求体参数</button> <br/><br/>

  <script type="text/javascript">
    const btn1 = document.getElementById('btn1')
    const btn2 = document.getElementById('btn2')
    const btn3 = document.getElementById('btn3')
    const btn4 = document.getElementById('btn4')
    const btn5 = document.getElementById('btn5')
    const btn6 = document.getElementById('btn6')
    const btn7 = document.getElementById('btn7')

    btn1.onclick = ()=>{
      // axios发送GET请求--不带参数--完整写法
      /* 
      axios({
        url:'http://localhost:8080/test1'
      }).then(
        response => {console.log('请求成功了',response.data)},
        error => {console.log('请求失败了',error)}
        )
      */

      // axios发送GET请求--不带参数--精简写法
      /* 
      axios.get('http://localhost:8080/test1').then(
        response => {console.log('请求成功了',response.data)},
        error => {console.log('请求失败了',error)}
      ) */
    }
    
    btn2.onclick = ()=>{
      // axios发送GET请求--带query参数--完整写法
      /* 
      axios({
        // url:'http://localhost:8080/test2?name=老刘&age=18&sex=女'
        url:'http://localhost:8080/test2',
        params:{
          name: '老刘', age: '18', sex: '女' // 此处写的是params，但携带的是query参数
        }
      }).then(
        response => {console.log('axios请求成功了',response.data)},
        error => {console.log('axios请求失败了',error)}
        )
       */

      // axios发送GET请求--带query参数--精简写法
      /* 
      axios.get('http://localhost:8080/test2',{ 
          params:{ name: '老刘', age: '18', sex: '女'}
        }).then(
        response => {console.log('请求成功了',response.data)},
        error => {console.log('请求失败了',error)}
      ) */
    }

    btn3.onclick = ()=>{
      // axios发送GET请求--带params参数--完整写法
      /* 
      axios({
        url:'http://localhost:8080/test3/老刘/18/女',
      }).then(
        response => {console.log('axios请求成功了',response.data)},
        error => {console.log('axios请求失败了',error)}
        )
       */

      // axios发送GET请求--带params参数--精简写法
      
      axios.get('http://localhost:8080/test3/老刘/18/女').then(
        response => {console.log('请求成功了',response.data)},
        error => {console.log('请求失败了',error)}
      )
    }

    btn4.onclick = ()=>{
      // axios发送POST请求--带query参数--完整写法
      /* 
      axios({
        method:'POST',
        url:'http://localhost:8080/test4',
        params:{
          name: '老刘', age: '18', sex: '女' // 此处写的是params，但携带的是query参数
        }
      }).then(
        response => {console.log('axios请求成功了',response.data)},
        error => {console.log('axios请求失败了',error)}
        )
       */

      // axios发送POST请求--带query参数--精简写法
      
      axios.post('http://localhost:8080/test4',{},{
        params:{ name: '老刘', age: '18', sex: '女'} // 此处写的是params，但携带的是query参数 
      }).then(
        response => {console.log('请求成功了',response.data)},
        error => {console.log('请求失败了',error)}
      )
    }
    
    btn5.onclick = ()=>{
      // axios发送POST请求--带params参数--完整写法
      /* 
      axios({
        method:'POST',
        url:'http://localhost:8080/test5/老刘/18/女'
      }).then(
        response => {console.log('axios请求成功了',response.data)},
        error => {console.log('axios请求失败了',error)}
        )
       */

      // axios发送POST请求--带params参数--精简写法
      
      axios.post('http://localhost:8080/test5/老刘/18/女').then(
        response => {console.log('请求成功了',response.data)},
        error => {console.log('请求失败了',error)}
      )

    }
    
    btn6.onclick = ()=>{
      // axios发送POST请求--带请求体参数--完整写法
      /* 
      axios({
        method:'POST',
        url:'http://localhost:8080/test6',
        // data: {name: '老刘', age: '18', sex: '女'} //data的值如果是对象，那么请求参数自动使用json编码
        data: 'name=老刘&age=18&sex=女'   // data的值如果是字符串，那么请求参数自动使用urlencoded编码
      }).then(
        response => {console.log('axios请求成功了',response.data)},
        error => {console.log('axios请求失败了',error)}
        )
       */

      // axios发送POST请求--带请求体参数--精简写法
      
      axios.post('http://localhost:8080/test6',
      {name: '老刘', age: '18', sex: '女'} 
      ).then(
        response => {console.log('请求成功了',response.data)},
        error => {console.log('请求失败了',error)}
      )

    }
    
    btn7.onclick = ()=>{
      // axios发送POST请求--带query\params\请求体参数--完整写法
      
      axios({
        method:'POST',
        url:'http://localhost:8080/test7/18',
        params:{name:'老刘'},
        data: 'sex=女'
      }).then(
        response => {console.log('axios请求成功了',response.data)},
        error => {console.log('axios请求失败了',error)}
        )
      

      // axios发送POST请求--带query\params\请求体参数--精简写法
      
      /* axios.post('http://localhost:8080/test6',
      {name: '老刘', age: '18', sex: '女'} 
      ).then(
        response => {console.log('请求成功了',response.data)},
        error => {console.log('请求失败了',error)}
      ) */

    }

  </script>
</body>
</html>